<template>
  <HomePanel ref="target" title="人气推荐" sub-title="人气爆款 不容错过">
    <ul  class="goods-list">
      <li v-for="item in HomeHot" :key="item.id">
        <RouterLink to="/">
          <img :src="item.picture" alt="">
          <p class="name">{{item.title}}</p>
          <p class="desc">{{item.alt}}</p>
        </RouterLink>
      </li>
    </ul>
  </HomePanel>
</template>

<script>
import HomePanel from './home-panel'
import { findHot } from '@/api/home'
import { ref } from 'vue'
import { useObserver } from '@/compstions/index'
export default {
  name: 'HomeHot',
  components: { HomePanel },
  data () {
    return {
      goods: []
    }
  },
  setup () {
    const HomeHot = ref([])
    async function loadHot () {
      const res = await findHot()
      console.log('人气推荐数据', res)
      HomeHot.value = res.data.result
    }
    // onMounted(() => {
    //   loadHot()
    // })
    // const target = ref(null)
    // // stop是一个可执行方法，调用就会停止监听
    // // 不管元素进入还是离开可视区域都不会再执行回调函数
    // // 注意：不会监听一次，只有进入视口和离开视口会监听
    // const { stop } = useIntersectionObserver(
    //   // 监听目标元素
    //   target,
    //   ([{ isIntersecting }], observerElement) => {
    //     // isIntersecting 是个布尔值，代表当前监听的元素是否进入视口区域
    //     if (isIntersecting) {
    //       loadHot()// 发起网络请求
    //       stop()// 停止监听
    //     }
    //   }
    // )
    const { target } = useObserver(loadHot)
    return {
      HomeHot,
      target
    }
  }
/*
数据懒加载
解决的问题：
网络层面的优化，只有组件进入视口才会获取数据(渲染层面优化)

实现思路：
监听组件是否已经进入到视口区域，进入之后发送Ajax

技术手段：
useIntersectionObserver
对目标进行监听然后满足条件执行回调，回调中就可以发送Ajax

注意点：
target ref 对象
每次进入视口移出视口
*/
}
</script>

<style scoped lang='less'>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;
  li {
    width: 306px;
    height: 406px;
    background: #f0f9f4;
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .price {
      color: @priceColor;
    }
  }
}
</style>
